
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
  name: 'app',
  computed: {
    ...mapState(['chainId']),
  },
  methods: {
    ...mapMutations(['updateChainId']),
    handleChainChanged(chainId) {
      this.updateChainId(chainId);
      sessionStorage.setItem('chainId', chainId);
    },
    handleAccountsChanged(accounts) {
      if (!accounts.length) {
        sessionStorage.setItem('address', '');
        window.location.reload();
      }
    },
    handleConnectChanged({ chainId }) {
      this.updateChainId(chainId);
      sessionStorage.setItem('chainId', chainId);
    },
  },
  async created() {
    const chainId = await web3.eth.getChainId();
    this.updateChainId(web3.utils.toHex(chainId));
    sessionStorage.setItem('chainId', web3.utils.toHex(chainId));

    const _this = this;
    if (!window.ethereum) return;
    window.ethereum.on('chainChanged', _this.handleChainChanged);
    window.ethereum.on('accountsChanged', _this.handleAccountsChanged);
    window.ethereum.on('connect', _this.handleConnectChanged);
  },
  destroyed() {
    const _this = this;
    if (!window.ethereum) return;
    window.ethereum.removeListener('chainChanged', _this.handleChainChanged);
    window.ethereum.removeListener('accountsChanged', _this.handleAccountsChanged);
    window.ethereum.removeListener('connect', _this.handleConnectChanged);
  },
};
</script>

<style lang="scss">
@import './style/variable.scss';
html,body {
  width: 100%;
  height: 100%;
  background: $theme;

}
#app {
  height: 100%;
  margin: 0 auto;


}
</style>
